<template>
  <div class="app-container">
    <div style="margin-top: 15px; margin-bottom: 15px; width: 50%">
      <el-input
        placeholder="招聘企业"
        v-model="listQuery.title"
        class="input-with-select"
        :disabled="listQuery.disable"
      >
        <template #prepend>
          <el-select
            v-model="value"
            placeholder="招聘类型"
            style="width: 150px"
            @click="chosetype"
            :disabled="disable"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
              @click="setType(item)"
            >
            </el-option>
          </el-select>
        </template>
        <!-- <el-button type="primary" icon="el-icon-search"></el-button>  -->
        <template #append>
          <el-button icon="el-icon-search" @click="search"></el-button>
        </template>
      </el-input>
    </div>

    <!-- <el-table
      :key="tableKey"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="ID" min-width="15%" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="招聘企业" min-width="150px">
        <template #default="scope">
          <el-link :href="scope.row.website" target="_blanck" style="margin-left: 10px">{{
            scope.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="招聘日期"
        prop="datetime"
        width="200px"
        align="center"
      >
      </el-table-column>
      <el-table-column label="类型" width="400px">
        <template #default="scope">
          <el-tag
            v-for="item in scope.row.tags"
            :key="item"
            type="danger"
            effect="light"
            style="margin-left: 10px"
          >
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table> -->

    <job-item
      v-for="(item, index) in tableData"
      :key="index + 1"
      :title="item.title"
      :website="item.website"
      :datetime="item.datetime"
      :tags="item.tags"
    ></job-item>

    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="total, prev, pager, next"
      :total="listQuery.page"
      style="margin-top: 10px"
    >
    </el-pagination>
  </div>
</template>

<script>
import jobItem from "./components/item.vue";

export default {
  name: "DashboardAdmin",
  components: {
    jobItem,
  },
  data() {
    return {
      tag: "",
      value: "",
      options: [],
      type: "",
      listQuery: {
        page: 1,
        limit: 20,
        title: "",
        disable: false,
      },
      disable: false,
      importanceOptions: [1, 2, 3],
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      list: {
        id: 1,
        timestamp: new Date(),
        title: "",
        type: "",
        readings: "110",
      },
      tableData: [],
      color: ["success", "info", "danger", "warning", ""],
    };
  },
  created() {
    let queryparams = this.$route.query;
    let tmp = "";
    for (let key in queryparams) {
      let item = queryparams[key];
      tmp += item;
    }
    this.tag = tmp; //拼接得到选项
    // 得到第一页
    this.axios({
      url: "recruitment/tagList",
      method: "get",
      params: {},
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    })
      .then((res) => {
        // console.log("标签");
        console.log(res);
        let tags = ["全部"];
        for (let index = 0; index < res.data.data.length; index++) {
          tags.push(res.data.data[index]);
        }
        this.options = tags;
      })
      .catch((err) => {
        console.log(err);
      });
    // 默认全选
    this.axios({
      url: "recruitment/home",
      method: "get",
      params: {
        pageCount: 1,
        size: 8,
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    })
      .then((res) => {
        console.log("首页");
        console.log(res);
        this.listQuery.page = res.data.data.total;
        for (let key in res.data.data.list) {
          res.data.data.list[key].tags = res.data.data.list[key].tags.split(
            ","
          );
        }
        this.tableData = res.data.data.list;
        console.log(this.tableData);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    chosetype() {
      this.listQuery.title = "";
    },
    setType(type) {
      if (type != "全部") {
        this.listQuery.disable = true;
      } else {
        this.listQuery.disable = false;
      }
      this.type = type;
    },
    search() {
      console.log("招聘类型");
      console.log(this.type);
      console.log("招聘企业");
      console.log(this.listQuery.title);
      if (this.listQuery.title != "") {
        this.disable = true; //不能选择类型
        this.axios({
          url: "recruitment/search",
          method: "get",
          params: {
            pageCount: 1,
            size: 8,
            keyword: this.listQuery.title,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            //返回结果了 可以再全选
            this.disable = false;
            console.log("模糊搜索");
            console.log(res);
            this.listQuery.page = res.data.data.total;
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.type == "全部") {
        // 得到不同类型的第一页
        this.axios({
          url: "recruitment/home",
          method: "get",
          params: {
            pageCount: 1,
            size: 8,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            console.log("首页");
            console.log(res);
            this.listQuery.page = res.data.data.total;
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.type != "") {
        // 得到不同类型的第一页
        this.axios({
          url: "recruitment/detail",
          method: "get",
          params: {
            pageCount: 1,
            size: 8,
            tag: this.type,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            console.log("不同类型第一页");
            console.log(res);
            this.listQuery.page = res.data.data.total;
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "info",
          message: "请选择类型",
        });
      }
    },
    handleCurrentChange(val) {
      console.log("当前页面");
      console.log(val);
      if (this.listQuery.title != "") {
        this.disable = true;
        this.axios({
          url: "recruitment/search",
          method: "get",
          params: {
            pageCount: val,
            size: 8,
            keyword: this.listQuery.title,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            this.disable = false;
            this.listQuery.page = res.data.data.total;
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.type != "" && this.type != "首页") {
        this.axios({
          url: "recruitment/detail",
          method: "get",
          params: {
            pageCount: val,
            size: 8,
            tag: this.type,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.axios({
          url: "recruitment/home",
          method: "get",
          params: {
            pageCount: val,
            size: 8,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
          .then((res) => {
            for (let key in res.data.data.list) {
              if (res.data.data.list[key].tags != null) {
                res.data.data.list[key].tags = res.data.data.list[
                  key
                ].tags.split(",");
              }
            }
            this.tableData = res.data.data.list;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  width: 65%;
  margin: 0 auto; /*水平居中*/
  padding: 32px;
  /* background-color: rgb(250, 250, 250); */
  /* position: relative; */
}

.filter-container {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 10px;
  text-align: left;
}

.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #f0f2f5;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: center center no-repeat #f0f2f5;
  background-size: 16px;
  cursor: pointer;
  margin: 0;
  color: #303133;
}
</style>
